<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<script src="./jquery-3.6.0.js"></script>
<body>
  <style>
   #box{
   width: 600px;
   height: 400px;
   background: black;
   position: relative;
   border: red 2px solid;
   }
  </style>
<div id="box">
  <div>
  <button>开</button>
</div>
</div>
</body>
<script>
  //"borderRadius":"50%",
$(function(){
  $("button").css({"width":"40px","height":"40px","background":"skyblue","margin":"auto","position": "absolute","left":"0px","top":"0px","left":"50%","top":"50%","transform":"translate(-50%,-50%)","border":"none"})
  $("div:eq(1)").css({"width":"100px","height":"100px","borderRadius":"50%","border":"#ccc solid 1px","position": "absolute","left":"50%","top":"50%","transform":"translate(-50%,-50%)"})

})
$(function(){
  // var a =  $("button").innerHTML
  let flag=true
  $("button").click(function(){
    if(flag){
      $("div:eq(0)").css({"background":"#fff"})
      $("button").css({"borderRadius":"50%","background":"yellow"})
      $("button").html("开")
   
    flag=false
    }else{
     
      // alert(123)
      $("div:eq(0)").css({"background":"#000",})
      $("button").css({"borderRadius":"0%","background":"skyblue"})
    $("button").html("关")
      flag=true
    }
  })
  
})


</script>
</html>